<template>
  <div>
    <el-row :gutter="10" style="margin-left: 5px; margin-top: 5px; margin-right: 5px">
      <!--    工程信息高级搜索-->
      <el-col :span="24" v-show="showAdvancedSearch">
        <el-card>
          <el-form size="small" :inline="true" label-width="68px">
            <el-form-item label="数字化单位" prop="shuzihuadanwei">
              <el-input v-model="engQueryParams.shuzihuadanwei" placeholder="请输入数字化单位" clearable
                        @keyup.enter.native="searchEng"/>
            </el-form-item>
            <el-form-item label="移交单位" prop="yijiaodanwei">
              <el-input v-model="engQueryParams.yijiaodanwei" placeholder="请输入移交单位" clearable
                        @keyup.enter.native="searchEng"/>
            </el-form-item>
            <el-form-item label="工程地点" prop="allname">
              <el-input v-model="engQueryParams.allname" placeholder="请输入工程地点" clearable
                        @keyup.enter.native="searchEng"/>
            </el-form-item>
            <el-form-item label="建设单位" prop="buildingorg">
              <el-input v-model="engQueryParams.buildingorg" placeholder="请输入建设单位" clearable
                        @keyup.enter.native="searchEng"/>
            </el-form-item>
            <el-form-item label="立项批准单位" prop="checkorg">
              <el-input v-model="engQueryParams.checkorg" placeholder="请输入立项批准单位" clearable
                        @keyup.enter.native="searchEng"/>
            </el-form-item>
            <el-form-item label="设计单位" prop="designorg">
              <el-input v-model="engQueryParams.designorg" placeholder="请输入设计单位" clearable
                        @keyup.enter.native="searchEng"/>
            </el-form-item>
            <el-form-item label="施工单位" prop="operationorg">
              <el-input v-model="engQueryParams.operationorg" placeholder="请输入施工单位" clearable
                        @keyup.enter.native="searchEng"/>
            </el-form-item>
            <el-form-item label="勘察单位" prop="explorationorg">
              <el-input v-model="engQueryParams.explorationorg" placeholder="请输入勘察单位" clearable
                        @keyup.enter.native="searchEng"/>
            </el-form-item>
            <el-form-item label="监理单位" prop="supervisionorg">
              <el-input v-model="engQueryParams.supervisionorg" placeholder="请输入监理单位" clearable
                        @keyup.enter.native="searchEng"/>
            </el-form-item>
            <el-form-item label="立项批准文号" prop="checkIssueno">
              <el-input v-model="engQueryParams.checkIssueno" placeholder="请输入立项批准文号" clearable
                        @keyup.enter.native="searchEng"/>
            </el-form-item>
            <el-form-item label="规划许可证号" prop="planlicenseno">
              <el-input v-model="engQueryParams.planlicenseno" placeholder="请输入规划许可证号" clearable
                        @keyup.enter.native="searchEng"/>
            </el-form-item>
            <el-form-item label="用地规划许可证号" prop="landplanlicenseno">
              <el-input v-model="engQueryParams.landplanlicenseno" placeholder="请输入用地规划许可证号" clearable
                        @keyup.enter.native="searchEng"/>
            </el-form-item>
            <el-form-item label="施工许可证号" prop="operationlicenseno">
              <el-input v-model="engQueryParams.operationlicenseno" placeholder="请输入施工许可证号" clearable
                        @keyup.enter.native="searchEng"/>
            </el-form-item>
            <el-form-item label="开工时间" prop="startdate">
              <el-date-picker clearable v-model="engQueryParams.startdate" type="date" value-format="yyyy-MM-dd"
                              placeholder="请选择开工时间"/>
            </el-form-item>
            <el-form-item label="竣工时间" prop="enddate">
              <el-date-picker clearable v-model="engQueryParams.enddate" type="date" value-format="yyyy-MM-dd"
                              placeholder="请选择竣工时间"/>
            </el-form-item>
            <el-form-item label="项目经理" prop="projmanager">
              <el-input v-model="engQueryParams.projmanager" placeholder="请输入项目经理" clearable
                        @keyup.enter.native="searchEng"/>
            </el-form-item>
            <el-form-item label="分部(项)工程" prop="partproj">
              <el-input v-model="engQueryParams.partproj" placeholder="请输入分部(项)工程" clearable
                        @keyup.enter.native="searchEng"/>
            </el-form-item>
            <el-form-item label="合同号" prop="cnum">
              <el-input v-model="engQueryParams.cnum" placeholder="请输入合同号" clearable
                        @keyup.enter.native="searchEng"/>
            </el-form-item>
            <el-form-item label="申请时间" prop="applydate">
              <el-date-picker clearable v-model="engQueryParams.applydate" type="date" value-format="yyyy-MM-dd"
                              placeholder="请选择申请时间"/>
            </el-form-item>
            <el-form-item label="批准时间" prop="passdate">
              <el-date-picker clearable v-model="engQueryParams.passdate" type="date" value-format="yyyy-MM-dd"
                              placeholder="请选择批准时间"/>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <!--    工程信息-->
      <el-col :span="8">
        <el-card style="height: 780px" v-loading="engLoading">
          <div slot="header" class="search-header">
            <div class="show_title">工程目录：</div>
            <el-input v-model="engQueryParams.engname" placeholder="搜索工程" clearable @keyup.enter.native="searchEng"
                      class="my_input"/>
            <div class="button-group">
              <el-button type="primary" icon="el-icon-search" size="mini" @click="searchEng">搜索</el-button>
              <el-button type="success" icon="el-icon-sort" size="mini" @click="toggleSearchMode">高级搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetEng">重置</el-button>
            </div>
          </div>
          <div class="engs-container" ref="engsContainer">
            <div class="eng-row" v-for="eng in engList" :key="eng.id" @click="selectEng(eng)"
                 :class="{ selected: eng === selectInfo.selectedEng }">
              <i class="folder-icon eng-folder-icon"></i>
              <div slot="reference" class="name-wrapper">
                <span size="medium" class="folder-name" style="display:inline-block;width:100%;word-wrap:break-word;white-space:normal;">{{ eng.engname }}</span>
              </div>
            </div>
          </div>
          <div class="pagination-container">
            <!-- 分页信息 -->
            <el-pagination
              @size-change="handleSizeChangeEng"
              @current-change="handleCurrentChangeEng"
              :current-page.sync="engQueryParams.pageNum"
              :page-size.sync="engQueryParams.pageSize"
              layout="total, prev, pager, next, jumper"
              :pager-count="5"
              :total="engTotal"
            ></el-pagination>
          </div>
        </el-card>
      </el-col>
      <!--    案卷信息-->
      <el-col :span="12">
        <volume-list ref="volumeList" :selectedOneEng="selectInfo.selectedEng" @selectVolume="selectVolume"
                     @resetVolume="resetVolume"></volume-list>
      </el-col>
      <!--    文件信息-->
      <el-col :span="4">
        <file-list ref="fileList" :selectedOneVolume="selectInfo.selectedVolume" @selectFile="selectFile"></file-list>
      </el-col>
    </el-row>

    <el-row :gutter="10" style="margin-left: 5px; margin-top: 5px; margin-right: 5px">
      <el-card>
        <el-row>
          <el-col :span="24" v-show="selectInfo.currentInfo === 'eng'">
            <eng-info :eng-info="selectInfo.selectedEng"/>
          </el-col>
          <el-col :span="24" v-show="selectInfo.currentInfo === 'volume'">
            <volume-info :volume-info="selectInfo.selectedVolume"/>
          </el-col>
          <el-col :span="24" v-show="selectInfo.currentInfo === 'file'">
            <file-info :file-info="selectInfo.selectedFile"/>
          </el-col>
          <el-col :span="24" v-show="selectInfo.currentInfo === ''">
            <el-empty description="无工程信息"></el-empty>
          </el-col>
        </el-row>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import VolumeList from "@/views/system/search/volumelist.vue";
import FileList from "@/views/system/search/filelist.vue";
import info from "@/views/system/search/info.vue";
import EngInfo from "@/views/system/search/engInfo";
import VolumeInfo from "@/views/system/search/volumeInfo";
import FileInfo from "@/views/system/search/fileInfo";
import {listEngInfo} from "@/api/system/enginfo";

export default {
  components: {
    VolumeList,
    FileList,
    info,
    EngInfo,
    VolumeInfo,
    FileInfo,
  },
  data() {
    return {
      showAdvancedSearch: false, // 初始时为简单搜索模式
      selectInfo: {
        selectedEng: null,
        selectedVolume: null,
        selectedFile: null,
        currentInfo: "eng",
      },
      engQueryParams: {
        pageNum: 1,
        pageSize: 20,
      },
      engList: [], //工程列表
      engTotal: 0, //工程总数
      engLoading: false,
    };
  },
  created() {
    this.getEngList();
  },
  methods: {
    //获取工程信息
    getEngList() {
      this.engLoading = true;
      listEngInfo(this.engQueryParams).then((response) => {
        setTimeout(() => {
          this.engList = response.rows;
          this.engTotal = response.total;
          this.engLoading = false;
        }, 300);
      }).catch((error) => {
        this.$message.error("获取工程信息失败:" + error);
        this.engLoading = false;
      });
    },
    searchEng() {
      this.engQueryParams.pageNum = 1;
      this.engQueryParams.pageSize = 20;
      this.getEngList();
    },
    toggleSearchMode() {
      this.showAdvancedSearch = !this.showAdvancedSearch;
      this.$emit("showAdvancedSearch", this.showAdvancedSearch);
    },
    //工程重置选择
    resetEng() {
      this.$refs.volumeList.volumeList = [];
      this.$refs.fileList.fileList = [];
      this.selectInfo.currentInfo = '';
      this.engQueryParams = {
        pageNum: 1,
        pageSize: 20,
      };
      this.getEngList();
    },
    //选中工程
    selectEng(eng) {
      this.selectInfo.selectedEng = eng;
      this.selectInfo.currentInfo = "eng";
      this.$refs.fileList.fileList = [];
    },
    //选中案卷
    selectVolume(volume) {
      this.selectInfo.selectedVolume = volume;
      this.selectInfo.currentInfo = "volume";
    },
    //选中文件
    selectFile(file) {
      this.selectInfo.selectedFile = file;
      this.selectInfo.currentInfo = "file";
    },
    //案卷重置选择
    resetVolume() {
      this.selectInfo.currentInfo = "eng";
      this.$refs.fileList.fileList = [];
    },
    handleSizeChangeEng(pageSize) {
      this.engQueryParams.pageSize = pageSize;
      this.getEngList();
    },
    handleCurrentChangeEng(currentPage) {
      this.engQueryParams.pageNum = currentPage;
      this.getEngList();
    },
  },
};
</script>

<style>
/* 公共样式 */
.search-header {
  display: flex;
  align-items: center;
}

.my_button {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
  margin-left: 85%;
}

.my_input {
  margin-left: auto;
  width: 30%;
  margin-right: 5px;
}

.button-group {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.engs-container {
  height: 600px;
  overflow-y: auto;
}

.eng-row {
  flex-basis: 100%;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.eng-row:hover {
  cursor: pointer;
  background-color: #e5f3ff;
}

.pagination-container {
  margin-top: 10px;
}

.folder-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  background-size: cover;
}

.folder-name {
  flex-grow: 1;
  font-size: 14px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.show_title {
  font-weight: bold;
  font-size: 1.2rem;
  color: rgb(26, 115, 198);
}

.button-group {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

/* 不同图标的样式 */
.eng-folder-icon {
  background-image: url("~@/assets/icons/folder/eng-icon.png");
}

/* 选中状态的样式 */
.selected {
  /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);*/
  background-color: #cce8ff;
}
</style>

